<template>
  <el-row type="flex" class="row-bg" justify="space-between">
      <el-col :span="5">
        <div class="grid-content bg-purple">
          <el-image style="width: 40px; height: 40px" src="https://img2.baidu.com/it/u=2912510650,4206712384&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500">
          </el-image>
          <div class="block" @click="home" style="color: red;">&lt; 返回</div>
        </div>
      </el-col>
      <el-col :span="10">
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple-dark">
          <el-dropdown>
            <span class="el-dropdown-link">
              <el-avatar :src="avatarUrl"></el-avatar>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item icon="el-icon-user-solid">个人中心</el-dropdown-item>
              <el-dropdown-item icon="el-icon-error">退出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <div class="block" @click="message">消息</div>
        </div>
      </el-col>
  </el-row>
</template>

<script>
export default {
  computed:{
    avatarUrl(){
      return this.$store.state.avatarUrl
    }
  },
  methods: {
    //回到主页
    home(){
      if(this.$route.path !== '/home'){
        this.$router.push('home')
      }
    },
    message(){
      if(this.$route.path !== '/message'){
        this.$router.push('message')
      }
    }
  },
}
</script>

<style lang="less" scoped>
  .block{
    border-top: 1px solid transparent;
    width: 30%;
    font-weight: 500;
    line-height: 40px;
    text-align: center;
  }
  .block:hover{
    background-color: whitesmoke;
    border-top: 1px solid red;
    cursor: pointer;
  }
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  display: flex;
  justify-content: space-evenly;
  .el-dropdown{
    cursor: pointer;
    height: 40px;
  }
  .el-button{
    height: 40px;
  }
}
.bg-purple {
  display: flex;
  justify-content: space-evenly;
}

.grid-content {
  border-radius: 4px;
  min-height: 40px;
}
.row-bg {
  padding: 10px 12px;
  height: 60px;
  background-color: #f9fafc;
}
</style>